<template>
	<view>
		<view class="info-box">
			<view class="user-item p-20 mb-20 bg-white border-radius-base">
				<cos-avatar @tap="jumpUser(postUser.uuid)" :src="postUser.avatar" :showSex="true" :sexIcon="postUser.gender_label"></cos-avatar>
				<view class="user-item-user">
					<view class="d-flex align-items-center mb-10">
						<view class="user-name mr-10">{{ postUser.nickname }}</view>
						<view class="tag-box d-flex" v-if="postUser.is_guaranty || postUser.is_cert">
							<view class="mr-10 tag tag-guaranty" v-if="postUser.is_guaranty==1"><u-icon name='rmb' color="#ffffff" size='22'></u-icon>已担保</view>
							<view class="mr-10 tag tag-cert" v-if="postUser.is_cert==1"><u-icon name='account-fill' color="#ffffff" size='22'></u-icon>已认证</view>
						</view>
					</view>
					<view class="d-flex align-items-center">
						<view class="cxplain mr-10" v-if="postUser.city||postUser.province">{{ postUser.city||postUser.province }} |</view>
						<view class="cxplain mr-10">{{ postUser.identity_label }}</view>
					</view>
				</view>
				<view class="follow">
					<button class="border-radius-lg font-size-sm" v-if="postUser.is_follow" type="default" @tap="follow">已关注</button>
					<button class="border-radius-lg font-size-sm" v-else type="primary" @tap="follow">关注</button>
				</view>
			</view>
			
			<view class="mb-20 p-20 bg-white border-radius-base" v-if="type=='shoot'">
				<u-grid :col="3" :border="false">
					<u-grid-item index="/pages/my/fans">
						<u-icon class="mb-20" name="map-fill" size="60" color='#3ED799'></u-icon>
						<view class="font-size-base">面向{{postDetail.city}}</view>
					</u-grid-item>
					<u-grid-item index="/pages/my/follow">
						<u-icon class="mb-20" name="tags-fill" size="60" color='#6381FB'></u-icon>
						<view class="font-size-base">{{postDetail.shoot_who_label}}</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon class="mb-20" name="rmb" size="60" color='#FDCC3B'></u-icon>
						<view class="font-size-base">{{postDetail.fee_mode_label}}{{postDetail.fee_mode==2||postDetail.fee_mode==3?postDetail.fee+'元':''}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view class='section bg-white border-radius-base mb-20'>
				<view class="title font-size-lg font-weight-bold mb-20">{{type=='shoot'?'约拍信息':'作品名称/描述'}}</view>
				<view class="demand mb-20 font-size-lg text-color-grey">
					<view class="space-title mr-10" v-if="type=='shoot'&&postDetail.space_name" @tap.stop="toSpace">#{{ postDetail.space_name }}#</view>
					<rich-text class="post-text" :nodes="type=='shoot'?postDetail.demand:postDetail.describe"></rich-text>
				</view>
				<view class="demand mb-20 text-color-assist" v-if="type=='album'">
					<view v-if="postDetail.space_name" @tap.stop="toSpace">拍摄地点：<text class="space-title">#{{postDetail.space_name}}#</text></view>
					<view v-if="postDetail.device">拍摄设备：{{postDetail.device}}</view>
					<view v-if="postDetail.is_return_film">约拍返片：{{postDetail.is_return_film?'是':'否'}}</view>
				</view>
				<view class="media mb-20">
					<!-- <video v-if="cos_video.path" :controls="true" :autoplay="false" :src="cos_video.path" :poster="cos_video.poster.path"></video> -->
					<image class="w-100" mode="widthFix" v-for="(img, index) in postDetail.images" :key="img.id" @tap.stop="previewMedia(index)" :src="img.path"></image>
					<!-- <u-lazy-load height="100%" imgMode="widthFix" v-for="(mediaItem, index) in cos_images" :key="index" :image="mediaItem.path" @tap.stop="previewMedia(index)"></u-lazy-load> -->
					
				</view>
				<view class="tags mb-20" v-if="postDetail.tags.length>0">
					<view class="tag" v-for="(tag_item,tag_index) in postDetail.tags" :key="tag_item.key">{{tag_item.name}}</view>
				</view>
				<!-- 底部 -->
				<view class="time text-color-assist font-size-sm d-flex justify-content-between">
					<view class="">{{$f.timeAgo(postDetail.time_diff)}}</view>
					<view class="d-flex">
						<text class="mr-20">阅读 {{postDetail.reads}}</text>
						<text>点赞 {{postDetail.thumbs}}</text>
					</view>
				</view>
				<view class="d-flex p-20 thumbs-avatar" v-if="postDetail.thumbs>0">
					<cos-avatar @tap="jumpUser(item.user.uuid)" v-for="(item,index) in postDetail.thumbs_list" :key="item.id" :src="item.user.avatar" :showSex="true" :sexIcon="item.user.gender_label" size="mini"></cos-avatar>
					<view v-if="postDetail.thumbs>7" class="andsn bar">
						<text class="i text-color-assist font-size-extra-sm vertical-align">+{{postDetail.thumbs}}</text>
					</view>
				</view>
			</view>

			<view class='section bg-white border-radius-base mb-20' v-if="type=='shoot'&&postDetail.applys>0">
				<view class="title font-size-lg font-weight-bold">收到的约拍:{{postDetail.applys}}</view>
				<view class="section-user-list">
					<view class="user-item section-item" v-for="(item,index) in postDetail.applys_list" :key="item.id">
						<cos-avatar @tap="jumpUser(item.user.uuid)" :src="item.user.avatar" :showSex="true" :sexIcon="item.user.gender_label"></cos-avatar>
						<view class="user-item-user">
							<view class="d-flex align-items-center mb-10">
								<view class="user-name mr-10">{{ item.user.nickname }}</view>
								<view class="tag-box d-flex" v-if="item.user.is_guaranty || item.user.is_cert">
									<view class="mr-10 tag tag-guaranty" v-if="item.user.is_guaranty==1"><u-icon name='rmb' color="#ffffff" size='22'></u-icon>已担保</view>
									<view class="mr-10 tag tag-cert" v-if="item.user.is_cert==1"><u-icon name='account-fill' color="#ffffff" size='22'></u-icon>已认证</view>
								</view>
							</view>
							<view class="d-flex align-items-center">
								<view class="cxplain mr-10" v-if="item.user.city||item.user.province">{{ item.user.city||item.user.province }} |</view>
								<view class="cxplain mr-10">{{ item.user.identity_label }}</view>
							</view>
						</view>
						<view class="section-item-time">
							<view class="text-color-assist font-size-sm">{{$f.timeAgo(item.time_diff)}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class='section bg-white border-radius-base mb-20' v-if="postDetail.rewards&&postDetail.rewards.length>0">
				<view class="title font-size-lg font-weight-bold">收到的打赏</view>
				<view class="section-user-list">
					<view class="user-item section-item" v-for="(item,index) in postDetail.rewards" :key="item.id">
						<cos-avatar @tap="jumpUser(item.user.uuid)" :src="item.user.avatar" :showSex="true" :sexIcon="item.user.gender_label"></cos-avatar>
						<view class="user-item-user">
							<view class="d-flex align-items-center mb-10">
								<view class="user-name mr-10">{{ item.user.nickname }}</view>
								<view class="tag-box d-flex" v-if="item.user.is_guaranty || item.user.is_cert">
									<view class="mr-10 tag tag-guaranty" v-if="item.user.is_guaranty==1"><u-icon name='rmb' color="#ffffff" size='22'></u-icon>已担保</view>
									<view class="mr-10 tag tag-cert" v-if="item.user.is_cert==1"><u-icon name='account-fill' color="#ffffff" size='22'></u-icon>已认证</view>
								</view>
							</view>
							<view class="d-flex align-items-center">
								<view class="cxplain mr-10" v-if="item.user.city||item.user.province">{{ item.user.city||item.user.province }} |</view>
								<view class="cxplain mr-10">{{ item.user.identity_label }}</view>
							</view>
						</view>
						<view class="section-item-time">
							<view class="text-color-primary font-size-extra-lg font-weight-bold text-center">+{{item.nums}}</view>
							<view class="text-color-assist font-size-sm">{{$f.timeAgo(item.time_diff)}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="section bg-white border-radius-base" v-if="postDetail.download&&postDetail.is_self">
				<view class="title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'>原图下载地址 <text class="text-color-assist font-size-sm ml-20 font-weight-normal">(30分钟内有效,打开浏览器复制地址即可下载)</text> </view>
				</view>
				<view class="d-flex align-items-center p-20">
					<view class="text-color-blue text-over2 mr-10">{{postDetail.download.download_url}}</view>
					<view class="text-color-primary flex-shrink-0" @tap="copy(postDetail.download.download_url)">复制</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮操作 -->
		<view class="comment-tool">
			<view class="d-flex align-items-center">
				<view class="mr-30 d-flex flex-shrink-0">
					<u-icon v-if="postDetail.is_thumb_count" @tap="thumb" class="mr-30" name='thumb-up-fill' size='60' color="#EDD053"></u-icon>
					<u-icon v-else @tap="thumb" class="mr-30" name='thumb-up' size='60'></u-icon>
					<u-icon v-if="postDetail.is_collect_count" class="mr-30" name='star-fill' size='60' color="#6381FB" @tap="collection"></u-icon>
					<u-icon v-else class="mr-30" name='star' size='60' @tap="collection"></u-icon>
					<u-icon name='share' size='60' @tap="showShare=true"></u-icon>
					<!-- <button open-type="share" class="share-item u-reset-button mr-10">
						<u-icon name='share' size='60'></u-icon>
					</button> -->
				</view>
				<view class='w-100 d-flex align-items-center justify-content-between'>
					<button v-if="type=='album'&&!postDetail.is_self" class='border-radius-lg w-100 font-size-lg mr-20' type="primary" @tap="apply">联系{{postDetail.user.gender==1?'他':'她'}}</button>
					<button v-if="type=='shoot'" class='border-radius-lg w-100 font-size-lg' type="primary" @tap="apply">约拍{{postDetail.user.gender==1?'他':'她'}}</button>
					<button v-if="type=='album'&&!postDetail.is_self" class='border-radius-lg w-100 font-size-lg' type="info" @tap="reward">打赏{{postDetail.user.gender==1?'他':'她'}}</button>
					<button v-if="type=='album'&&postDetail.is_self" class='border-radius-lg w-100 font-size-lg' type="info" @tap="downloadOriginal">下载原图</button>
				</view>
			</view>
			
		</view>
		
		<!-- 分享选择弹窗 -->
		<q-popup v-model="showShare">
			<view class="share-wrap" @click="showShare = false">
				<button open-type="share" class="share-item u-reset-button">
					<u-icon name="weixin-fill" size="50"></u-icon>
					<text>微信好友</text>
				</button>
				<view class="share-item" @click="showShareGuide=true">
					<u-icon name="moments" size="50"></u-icon>
					<text>分享朋友圈</text>
				</view>
				<view class="share-item" @tap="generateShareText">
					<u-icon name="file-text-fill" size="50"></u-icon>
					<text>生成文案</text>
				</view>
			</view>
		</q-popup>
		
		<!-- 打赏选择弹窗 -->
		<q-popup v-model="showReward">
			<view class="font-size-lg text-color-base font-weight-bold mb-20 pt-30 pl-30">打赏金额</view>
			<view class="d-flex flex-wrap justify-content-between amounts">
				<view class="d-flex flex-column align-items-center just-content-center amount" 
					 :class="{'bg-primary text-color-white': item.selected, 'bg-base text-color-base': !item.selected}"
					  v-for="(item, index) in initialize.rewards" :key="index" @tap="handleRewardSelected(index)">
					<view class="d-flex align-items-center">
						  <view class="font-size-extra-lg font-weight-bold">{{ parseInt(item.value) }}</view>
						  <view class="font-size font-weight-light">金币</view>
					</view>
					<view class="font-size font-weight-light">¥{{item.price}}</view>
				</view>
				
				<view class="d-flex flex-column align-items-center just-content-center amount" :class="customRewardNums?'bg-primary text-color-white':'bg-base text-color-base'" @tap="rewardInputShow">
					<view class="d-flex align-items-center">
						  <view class="font-size-extra-lg font-weight-bold">{{customRewardNums?customRewardNums+'金币':'任意数量'}}</view>
					</view>
					<view class="font-size font-weight-light">{{customRewardNums?'¥'+customRewardNums:'自定义金币'}}</view>
				</view>
			</view>
			<view v-if="showCustomRewardInput" class="d-flex justify-content-between align-items-center p-30">
				<u-input class="mr-20 w-100" @input="rewardInput" :border="true" maxlength="3" type="number" placeholder="请输入打赏自定义金币数量" v-model="customRewardNums"></u-input>
				<button class="border-radius-base flex-shrink-0" type="primary">确定</button>
			</view>
			<view class="p-30">
				<button class='border-radius-lg font-size-lg' type="primary" @tap="confirmReward">确认打赏</button>
			</view>
		</q-popup>
		
		<!-- 海报弹窗 -->
		<!-- <u-popup v-model="showCanvas" mode="center" width="80%">
			<view class="canvas-box">
				<canvas style="width: 300px;height: 450px;" canvas-id="shareCanvas"></canvas>
				<view class="footer"><u-button :custom-style="shareBtnStyle" @click="saveImgToAlbum" type="success" shape="circle">保存/分享</u-button></view>
			</view>
		</u-popup> -->
		<!-- 分享组件 -->
		<shareGuide v-model="showShareGuide"></shareGuide>
		
		<!-- 登录popup -->
		<login-popup ref="loginPopup" @yes="loginYes"></login-popup>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import shareGuide from "../../components/shopro-share-guide/shopro-share-guide.vue";
import loginPopup from "../../components/login-popup/login-popup.vue"
export default {
	components: {
		shareGuide,
		loginPopup
	},
	computed:{
		...mapState(['initialize','hasLogin', 'userInfo', 'postUser'])
	},
	data() {
		return {
			postId:'',
			type:'',
			postDetail: "",
			rewardGoldSelectedIndex:'',
			rewardGold:'',
			showShare:false,
			showShareGuide:false,
			showReward:false,
			showCustomRewardInput:false,
			customRewardNums:'',
			thumbUrl:'',
			collectionUrl:'',
		};
	},
	onLoad(options) {
		this.postId    = options.id;
		this.type      = options.type;
		if(this.type=='shoot') {
			this.thumbUrl = 'post/addShootThumb';
			this.collectionUrl = 'post/addShootCollection';
		}else if(this.type=='album') {
			this.thumbUrl = 'post/addAlbumThumb';
			this.collectionUrl = 'post/addAlbumCollection';
		}
		this.getShootDetail();
	},
	onShareAppMessage(res) {
		return {
			title: this.postDetail.demand || this.postDetail.describe,
			path: '/pages/post/detail?id=' + this.postId + "&type="+this.type,
		};
	},
	onShareTimeline(res) {
		return {
			title: this.postDetail.demand || this.postDetail.describe,
			path: '/pages/post/detail',
			query: 'id=' + this.postId + '&type='+this.type
		}
	},
	methods: {
		...mapMutations(['setPostUser']),
		async getShootDetail() {
			uni.showLoading({
				mask: true,
				title: '加载中'
			});
			
			let url = '';
			let res = '';
			if(this.type=='shoot') {
				url = 'post/shootDetail';
				res = await this.$api('shootDetail')
			}else if(this.type=='album') {
				url = 'post/albumDetail'
				res = await this.$api('albumDetail')
			}
			
			this.postDetail = res.data.detail;
			this.setPostUser(this.postDetail.user);
			uni.hideLoading();
		},
		apply() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
			
			
			uni.navigateTo({
				url:"/pages/apply-shoot/apply-shoot?post_id="+ this.postDetail.id + '&type='+this.type
			})
		},
		thumb() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
			let title = this.postDetail.is_thumb_count?"取消点赞中...":'点赞中...'
			uni.showLoading({mask: true,title: title});			
			uni.hideLoading()
		},
		collection() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
			let title = this.postDetail.is_collect_count?"取消收藏中...":'收藏中...'
			uni.showLoading({mask: true,title: title});	
			uni.hideLoading();
		},
		follow() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
			
			let title = this.postDetail.user.is_follow?'取消关注中...':'关注中...';
			uni.showLoading({mask: true,title: title});
			uni.hideLoading()
		},
		previewMedia(index) {
			let medias = [];
			
			if(this.postDetail.images.length>0) {
				this.postDetail.images.forEach(item=>{
					medias.push({
						url:item.path,
						type:'image',
					})
				})
				
				uni.previewMedia({
					sources: medias, // 需要预览的资源列表
					current: index // 当前显示的资源序号
				})
			}
		},
		jumpUser(uuid) {
			uni.navigateTo({
				url: '/pages/user/home?uuid=' + uuid
			});
		},
		toSpace() {
			if(this.postDetail.space_id) {
				uni.navigateTo({
					url: '/pages/space/details?id=' + this.postDetail.space_id
				});
			}else{
				uni.openLocation({
					latitude: Number(this.postDetail.space_latitude), //要去的纬度-地址
					longitude: Number(this.postDetail.space_longitude), //要去的经度-地址
					name: this.postDetail.space_name,
					address: this.postDetail.space_address
				})
			}
		},
		reward() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
			
			this.showReward = true;
		},
		handleRewardSelected(index) {
			this.initialize.rewards.forEach(item => this.$set(item, 'selected', false))
			this.$set(this.initialize.rewards[index], 'selected', true)
			this.rewardGoldSelectedIndex = index;
			this.rewardGold = this.initialize.rewards[this.rewardGoldSelectedIndex].price;
			this.customRewardNums = "";
			this.showCustomRewardInput = false;
		},
		loginYes() {
			this.getShootDetail();
		},
		downloadOriginal() {
			uni.showLoading({
				mask: true,
				title: '下载地址生成中...'
			});
			
	
		},
		copy(text) {
			this.$f.copy(text);
		},
		generateShareText() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
			uni.showLoading({mask: true,title: "生成中..."});
			uni.hideLoading();
		},
		rewardInputShow() {
			this.showCustomRewardInput = true;
			this.rewardGoldSelectedIndex = '';
			this.initialize.rewards.forEach(item => this.$set(item, 'selected', false))
		},
		rewardInput(val) {		
			if(val==0) {
				this.$u.toast("自定义打赏金币不能为0！");return;
			}else{
				this.customRewardNums = val;
				this.rewardGold = val;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.post-title{
	margin: 20rpx 0;
}
.info-box {
	padding: 20rpx 20rpx 180rpx 20rpx;
}

.icon text {
	font-size: 24rpx;
	color: #999;
	margin-right: 20rpx;
}

/*关注*/

.user-item {
	display: flex;
	justify-content: center; // 内容自适应：上下居中
	align-items: center; // 子项对齐方式：左右居中
	
	.user-item-user {
		flex: 1;
		
		.cxplain {
			color: #999;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
	
	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
}

/*底部操作*/
.p-footer {
	margin: 30rpx;
	display: flex;
	font-size: 24rpx;
	color: #616161;
	.p-item {
		display: flex;
		align-items: center;
		.iconfont {
			font-size: 40rpx;
		}

		&:nth-child(2) {
			margin: 0 auto;
		}

		.iconfont {
			margin-right: 10rpx;
		}
	}
}

/*评论列表*/
.comment-box {
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 20rpx;
}

.comment-box > .title {
	margin-bottom: 20rpx;
}

.comment-item {
	display: flex;
	padding: 20rpx;
	&:active{
		background-color: #F5F5F5;
	}
	.c-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		
		.time {
			color: #999;
			font-size: 10px;
		}
		
		.user{
			display: flex;
			.thumbs{
				margin-left: auto;
				display: flex;
				align-items: center;
				color: #bfbfbf;
				.num{
					margin-right: 10rpx;
				}
			}
		}
	}
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1px solid #dd524d;
		margin-right: 20rpx;
	}
}

.sub-comment-item {
	margin-left: 100rpx;
	padding: 20rpx;
	&:active{
		background-color: #F5F5F5;
	}
	.user {
		display: flex;
		align-items: center;
		.name {
			color: #616161;
		}
		.avatar {
			margin-right: 10rpx;
		}
		
		.u-head{
			flex: 1;
			display: flex;
			.thumbs{
				margin-left: auto;
				display: flex;
				align-items: center;
				color: #bfbfbf;
				.num{
					margin-right: 10rpx;
				}
			}
		}
	}
	.reply {
		.time {
			margin-left: auto;
			font-size: 20rpx;
			color: #999;
		}
		.name {
			display: inline-block;
			color: #2b85e4;
			font-weight: 600;
		}
	}
}

/* 评论tool */
.comment-tool {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	padding: 20rpx;
	z-index: 999;
	border-top: 2rpx solid #f5f5f5;;
}

.comment-tool textarea {
	background-color: #f5f5f5;
	padding: 20rpx;
	border-radius: 10rpx;
	min-height: 40rpx;
}
.comment-tool image {
	width: 60rpx;
	height: 60rpx;
}
.comment-tool .u-btn {
	margin-left: 10rpx;
}


/*文章图片*/
.img-style-1 {
	display: block;
	width: 100%;
	max-height: 600rpx;
	border-radius: 5px;
}

.img-style-2 {
	display: flex;
}

.img-style-2 image {
	margin: 5rpx;
	border-radius: 5px;
	width: 100%;
	height: 294rpx;
}

.img-style-3 {
	display: flex;
	flex-wrap: wrap;
}

.img-style-3 image {
	width: 31.3%;
	height: 200rpx;
	margin: 1%;
	border-radius: 5px;
}

// 圈子信息
.topic-info {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	background-color: #f5f5f5;
	margin: 20rpx 0;
	.cover {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	.center {
		flex: 1;
		.count-txt {
			color: #999;
		}
	}
	.right {
		margin-left: 20rpx;
		color: #f29100;
	}
}
// 分享弹窗
.share-wrap{
	display: flex;
	padding: 30rpx;
	width: 80%;
	margin: 0 auto;
	justify-content: space-between;
	.share-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// &:nth-child(1){
		// 	margin-right: auto;
		// }
		image{
			width: 100rpx;
			height: 100rpx;
		}
		text{
			font-size: 24rpx;
			margin-top: 20rpx;
		}
	}
}

//打赏
.amounts {
	padding: 0rpx 30rpx;
	.amount {
		position: relative;
		width: calc(96% / 3);
		padding: 50rpx 0;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
	}
}

//海报弹窗
.canvas-box{
	height: 500px;
	position: relative;
	.footer{
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
	}
}

// 投票
.vote-box{
	background-color: #F5F5F5;
	border-radius: 20rpx;
	padding: 20rpx;
	margin: 20rpx;
	.title{
		font-weight: bold;
	}
	.expire-time{
		font-size: 24rpx;
		margin: 20rpx 0;
	}
	.vote-item{
		font-size: 24rpx;
		font-weight: bold;
		padding: 20rpx;
		border-radius: 20rpx;
		border: 1px solid #999;
		text-align: center;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
	}
	
	.active{
		background-color: #333;
		color: #fff;
	}
}

.expire-box{
	background-color: #999;
	color: #fff;
	font-size: 24rpx;
	display: inline-block;
	padding: 0 20rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

video {
	width: 100%;
}

.post-text {
	white-space: pre-wrap;
}
.space-title {
	color: #68c778;
}

.section {
	padding: 20rpx 0;
	
	.title {
		padding: 0 20rpx;
		
		.label::before {
		    content: "";
		    display: inline-block;
			vertical-align: -6rpx;
		    width: 8rpx;
		    height: 36rpx;
		    background-color: #ff9900;
		}
	}
	
	.demand {
		padding: 0 20rpx;
	}
	
	.media {
		padding: 0 20rpx;
	}
	
	.tags {
		padding: 0 20rpx;
	}
	
	.time {
		border-top: 2rpx solid #F1F1F1;
		padding: 20rpx 20rpx 0 20rpx;
	}
}

.tags {
	display: flex;
	position: relative;
	font-size: 0;
	font-family: Helvetica;
	flex-flow: wrap; 
	
	.tag {
		position: relative;
		display: inline-block;
		padding: 10rpx 26rpx;
		color: #666;
		font-size: 28rpx;
		text-align: center;
		border-radius: 60rpx;
		background-color: rgb(239, 210, 52);
		margin-bottom: 20rpx;
		margin-right: 10rpx;
	}
}
.tag-box {
	.tag{
		padding: 0rpx 10rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
		font-size: 22rpx;
		background-color: #f5f5f5;
		color: #616161;
	}
	
	.tag-guaranty {
		color: #ffffff;
		background-color: #24B19A;
	}
	
	.tag-cert {
		color: #ffffff;
		background-color: #5A84FB;
	}
}
.bar {
	width: 70rpx; 
	height: 70rpx; 
	background-color: #F5F5F5;
	border-radius: 70rpx;
	text-align: center;
	line-height: 70rpx;
}
.thumbs-avatar {
	padding-bottom: 0;
}
.section-user-list {
	padding: 0 20rpx;
}
.section-item {
	padding: 20rpx 0;
	border-bottom: 2rpx solid #F1F1F1;
	
	&:last-child{
		border-bottom:none;
		padding-bottom: 0;
	}
}
</style>
